<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">

    </style>
</head>
<body>

<div id="app">
    <div>
        <el-input v-model="empInfo.ename" placeholder="请输入姓名" style="display:inline-block;width: 200px;"></el-input>
        <el-form :model="Addemployee" status-icon :rules="rules" ref="Addemployee" label-width="100px"
                 class="demo-ruleForm" style="display: inline-block;">

            <el-select v-model="empInfo.did" placeholder="请选择部门">
                <el-option>所有</el-option>
                <el-option v-for="(g,i) in deptArr" :label="g.dname" :value="g.id"></el-option>
            </el-select>

        </el-form>
        <el-button icon="el-icon-search" circle @click="searchData()"></el-button>
        <el-button type="primary" icon="el-icon-plus" circle  @click="showAddStuDlog()"></el-button>
        <el-button icon="el-icon-download" type="primary"  @click="downloadInfo()">导出</el-button>
        <el-button icon="el-icon-upload2" type="primary"  @click="uploadInfo()">导入</el-button>
        <a  type="button" primary href="/cai/etemp.xlsx" style="text-decoration: none;font-size: 14px;color: black" >下载模板</a>
        <form id="haha" >
            <input type="file" name="e">
        </form>
    </div>
    <template>
        <el-table
                :data="info"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="ename"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="hiredate"
                    label="入职时间">
            </el-table-column>
            <el-table-column
                    prop="telephone"
                    label="电话号码">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="dept.dname"
                    label="部门">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="showUpdateEmpDlog(scope.row.id)">编辑</el-button>
                    <el-button type="text" size="small" @click="deleteEmp(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="empNumberAll">
        </el-pagination>

        <el-dialog title="添加新员工" :visible.sync="addEmpVisible" width="30%" center>
            <el-form :model="Addemployee" status-icon :rules="rules" ref="Addemployee" label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="员工姓名" prop="ename">
                    <el-input type="text" v-model="Addemployee.ename"></el-input>
                </el-form-item>
                <el-form-item label="入职时间" prop="hiredate">
                    <el-input type="date" v-model="Addemployee.hiredate"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" prop="telephone">
                    <el-input v-model="Addemployee.telephone"></el-input>
                </el-form-item>
                <el-form-item label="员工年龄" prop="age">
                    <el-input v-model.number="Addemployee.age"></el-input>
                </el-form-item>
                <el-form-item label="员工部门" prop="did">
                    <el-select v-model="Addemployee.did" placeholder="请选择部门">
                        <el-option v-for="(g,i) in deptArr" :label="g.dname" :value="g.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" prop="rid">
                    <el-select v-model="Addemployee.rid" placeholder="请分配权限">
                        <el-option v-for="(g,i) in roleArr" :label="g.rname" :value="g.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
					<el-button @click="addEmpVisible = fales">取 消</el-button>
					<el-button type="primary" @click="AddEmp()">确 定</el-button>
				</span>
        </el-dialog>

        <el-dialog title="修改员工信息" :visible.sync="updateEmpVisible" width="30%" center>
            <el-form :model="Updateemployee" status-icon :rules="rules" ref="Updateemployee" label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="" prop="id">
                    <el-input type="hidden" v-model="Updateemployee.id"></el-input>
                </el-form-item>
                <el-form-item label="员工姓名" prop="ename">
                    <el-input type="text" v-model="Updateemployee.ename"></el-input>
                </el-form-item>
                <el-form-item label="入职时间" prop="hiredate">
                    <el-input type="date" v-model="Updateemployee.hiredate"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" prop="telephone">
                    <el-input v-model="Updateemployee.telephone"></el-input>
                </el-form-item>
                <el-form-item label="员工年龄" prop="age">
                    <el-input v-model.number="Updateemployee.age"></el-input>
                </el-form-item>
                <el-form-item label="员工部门" prop="did">
                    <el-select v-model="Updateemployee.did" placeholder="请选择部门">
                        <el-option v-for="(g,i) in deptArr" :label="g.dname" :value="g.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
					<el-button @click="updateEmpVisible = fales">取 消</el-button>
					<el-button type="primary" @click="UpdateEmp()">确 定</el-button>
				</span>
        </el-dialog>
    </template>

</div>
</body>
<script>
    $.get("/cai/aaa/listDept",function(backData){
            app.deptArr = backData.data;
    });
    $.get("/cai/aaa/listRole",function (backData) {
            app.roleArr = backData.data;
    });
    var app = new Vue({
        el: "#app",
        data:{
            info:[],
            empInfo:{},
            deptArr:[],
            roleArr:[],
            empNumberAll:0,
            addEmpVisible: false,
            updateEmpVisible:false,
            Addemployee:{},
            Updateemployee:{},
            rules:{
                ename: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                hiredate: [
                    { required: true, message: '请选择入职日期', trigger: 'blur' },
                ],
                telephone: [
                    { required: true, message: '请输入电话', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确电话号码',trigger: 'blur'}
                ],
                age: [{
                    required: true,
                    message: '请输入员工年龄',
                    trigger: 'blur'
                },
                    {
                        type: 'number',
                        message: '年龄必须为数字值'
                    },
                    {
                        pattern: /^([0-9]|[1-9]\d|1dd|1[0-4]\d|15[0-5])$/,
                        message: '范围在0-155',
                        trigger: 'blur'
                    }
                ],
                did: [
                    { required: true,message:'请选择员工部门', trigger: 'blur' },
                ],
                rid: [
                    { required: true,message:'请分配权限', trigger: 'blur' },
                ],
            }
        },
        methods:{
            downloadInfo:function(){
                window.location.href="/cai/aaa/download?ename="+app.empInfo.ename+"&did="+app.empInfo.did;
            },
            uploadInfo:function(){
                var data = new FormData(haha);
                $.ajax({
                    url:"/cai/aaa/uploadEmpExcel",
                    type:"POST",
                    data:data,
                    processData:false,
                    contentType:false,
                    success:function(backData){

                    }
                });
                getInfo(1,10);
            },
            handleCurrentChange:function(val) {
                getInfo(val,10);
            },
            searchData:function(){
                getInfo(1,10);
            },
            deleteEmp:function(a){
                if (a == 1){
                    app.$notify.error({
                        title: '温馨提示',
                        message:'总经办不可删除',
                    });
                }else {
                    if(confirm("您确定要删除该员工吗？")){
                        $.get("/cai/aaa/deleteEmp/"+a,function (backData) {
                            if (backData.code==2){
                                app.$notify.error({
                                    title: '温馨提示',
                                    message:backData.msg,
                                });
                            } else {
                                app.$notify({
                                    title: '温馨提示',
                                    message:backData.msg,
                                    type: 'success',
                                });
                                getInfo(1,10);
                            }
                        });
                    }
                }
            },
            UpdateEmp:function(){
                app.$refs["Updateemployee"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/aaa/updateEmp",app.Updateemployee,function (backData) {
                            if (backData.code==1){
                                app.$notify({
                                    title: '温馨提示',
                                    message:backData.msg,
                                    type: 'success'
                                });
                                app.updateEmpVisible = false;
                                getInfo(1,10);
                            } else {
                                app.$notify.error({
                                    title: '温馨提示',
                                    message:backData.msg,
                                });
                            }
                        })
                    }
                });
            },
            showUpdateEmpDlog:function(a){
                if (a == 1){
                    app.$notify.error({
                        title: '温馨提示',
                        message:'总经办不可更改',
                    });
                }else {
                    $.post("/cai/aaa/getEmp/"+a,function(backData){
                        app.Updateemployee=backData.data;
                        app.updateEmpVisible = true;
                        app.$refs["Updateemployee"].resetFields();
                    });
                }
            },
            showAddStuDlog:function(){
                $.get("/cai/aaa/listDept",function(backData){
                    app.deptArr = backData.data;
                    app.addEmpVisible = true;
                    app.$refs["Addemployee"].resetFields();
                });
            },
            AddEmp:function () {
                app.$refs["Addemployee"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/aaa/AddEmp",app.Addemployee,function (backData) {
                            if (backData.code==1){
                                app.$notify({
                                    title: '成功',
                                    message: '这是一条成功的提示消息',
                                    type: 'success'
                                });
                                app.addEmpVisible = false;
                                getInfo(1,10);
                            } else {
                                app.$notify.error({
                                    title: '温馨提示',
                                    message:backData.msg
                                });
                            }
                        });
                    }
                });
            }
        }
    });
    function getInfo(a, b) {
        app.empInfo.pageNo = a;
        app.empInfo.pageCount = b;

        $.post("/cai/aaa/list",app.empInfo,function (backData) {
            app.info=backData.data.empListAll;
            app.empNumberAll=backData.data.empNumber;
        });
    }
    getInfo(1, 10);
</script>
</html>
